/**
* @name    { 轮播图（完整源码） }
* @info    { 自定义轮播图以及动画 }
* @author  { 前端uio 2024-5-20 }
*
* @click        funtion => 处理对应的点击事件
* @transition   组件    => 实现过渡动画
* @el-icon      组件    => 切换图片的左右箭头图标
*/
<template>
  <div>
    <div  class="banner">
      <img src="../../assets/image/test/test.jpeg" class="img">
      <div v-for="(title,titleIndex) in titles" :key="titleIndex"  class="content">
        <transition name="scale">
          <div v-show="imgIndex===titleIndex" >
            <span>{{title}}</span>
          </div>
        </transition>
      </div>
      <div class="dot-content">
        <div v-for="(item,index) in imgArr.length" :key="index" :class="index===imgIndex?'active':'dot-box'" @click="selectImg(index)">
        </div>
      </div>
      <el-icon size="40" class="left-btn" @click="next(-1)"><ArrowLeftBold /></el-icon>
      <el-icon size="40" class="right-btn" @click="next(1)"><ArrowRightBold /></el-icon>
    </div>
  </div>


  <div class="app-container" style="margin-top: 50px ; border-top: #1f2d3d 5px solid" >
    <el-table v-loading="loading" :data="clubsList" >
      <el-table-column label="社团名称" align="center" prop="clubName" />
      <el-table-column label="社团logo" align="center" prop="clubLogo" width="100">
        <template #default="scope">
          <image-preview :src="scope.row.clubLogo" :width="50" :height="50"/>
        </template>
      </el-table-column>
      <el-table-column label="当前人数" align="center" prop="currentMember"  />
      <el-table-column label="社团容纳量" align="center" prop="capacity">
        <template #default="scope">
          <dict-tag :options="club_capacity" :value="scope.row.capacity"/>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="primary"  @click="handleSelectClub(scope.row)" >社团详情</el-button>
          <el-button link type="primary"  @click="handleSelectAnnouncement(scope.row)" >查看公告</el-button>
          <el-button link type="primary"  @click="handleApplication(scope.row)" v-hasPermi="['application:application:add']">申请加入</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 查看社团公告列表对话框 -->
    <el-dialog title="社团公告"  :data="announcementsList" v-model="openAnnouncementList" width="500px"  style="padding-top: 50px"  center append-to-body>
      <el-table v-loading="loading" :data="announcementsList"  style="margin-top: 5px">
        <el-table-column label="公告标题" align="center" prop="title" />
        <el-table-column label="公告发布日期" align="center" prop="publishDate" width="180">
          <template #default="scope">
            <span>{{ parseTime(scope.row.publishDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-button link type="primary" icon="view" @click="selectAnnouncementInfo(scope.row)" >查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <div class="dialog-footer" style="margin-top: 30px">
          <el-button type="primary" @click="submitFormClubInfo">确 定</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 查看社团公告详细信息对话框 -->
    <el-dialog   :title="title" v-model="openAnnouncementInfo" width="500px" center style="padding-top: 50px" append-to-body>
      <el-form-item label="公告内容" prop="content" style="margin-top: 5px">
        <textarea style="width: 100%; height: 120px;font-family: 黑体; font-size: 15px "  v-model="form.content" disabled />
      </el-form-item>
      <el-form-item label="公告图片" prop="photo" >
        <image-preview :src="form.photo" :width="100" :height="100" />
        <image-preview :src="form.photo" :width="100" :height="100" style="right: -20px"/>
      </el-form-item>
<!--      <el-form-item label="图片" prop="photo" >-->
<!--          <image-preview :src="form.photo" :width="50" :height="50"/>-->
<!--      </el-form-item>-->
      <el-form-item label="发布时间" prop="publishDate">
        <el-input v-model="form.publishDate" disabled />
      </el-form-item>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitFormClubInfo">确 定</el-button>
        </div>
      </template>
    </el-dialog>





    <!-- 查看社团详细信息对话框 -->
    <el-dialog   :title="title" v-model="open" width="500px"  center  style="padding-top: 50px" append-to-body>
      <el-form ref="clubsRef" :model="form"  label-width="80px" style="margin-top: 5px">
        <el-form-item label="社团名称" prop="clubName">
          <el-input v-model="form.clubName" disabled />
        </el-form-item>
        <el-form-item label="社团描述" prop="description"  >
          <textarea  style="width: 100%; height: 120px;font-family: 黑体; font-size: 15px "  v-model="form.description" disabled />
        </el-form-item>
      </el-form>
      <template #footer style="margin-top: 30px">
        <div class="dialog-footer">
          <el-button type="primary" @click="submitFormClubInfo">确 定</el-button>
        </div>
      </template>
    </el-dialog>



    <!-- 申请加入社团对话框 -->
    <el-dialog :title="title" v-model="openApplication" width="500px" center  style="padding-top: 50px" append-to-body>
      <el-form ref="applicationRef" :model="form" :rules="rules" label-width="80px" style="margin-top: 5px">
        <el-form-item label="社团名称" prop="clubName">
          <el-input v-model="form.clubName" placeholder="请输入社团名称" disabled />
        </el-form-item>
        <el-form-item label="申请账号" prop="userAccount">
          <el-input v-model="form.userAccount" placeholder="请输入申请账号"  disabled/>
        </el-form-item>
        <el-form-item label="申请原因" prop="applicationCause">
          <el-input v-model="form.applicationCause" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <template #footer  style="margin-top: 30px">
        <div class="dialog-footer">
          <el-button type="primary" @click="submitFormApplication">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>



    <pagination
        v-show="total>0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
    />
  </div>
</template>
<script setup name="club-info">
import {ref,onMounted, onUnmounted} from 'vue'
// 从api中引入社团的接口
import { listClubs,getClubs } from "@/api/clubs/clubs";
// 从api中引入公告的接口
import {listAnnouncements,getAnnouncements } from "@/api/announcements/announcements";
// 从api中引入申请的接口
import { addApplication  } from "@/api/application/application";
//获取当前所登录的用户信息
import { getUserProfile } from "@/api/system/user";

import {Edit} from "@element-plus/icons-vue";
import user from "../../../store/modules/user.js";

const { proxy } = getCurrentInstance();
const { sys_yes_no, club_capacity } = proxy.useDict('sys_yes_no', 'club_capacity');

const announcementsList = ref([]);
const clubsList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const openAnnouncementList = ref(false);
const openAnnouncementInfo = ref(false);
const openApplication = ref(false);

const state = reactive({
  user: {},
});

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    clubId: null,
    clubName: null,
    delFlag: null
  },
  rules: {
    clubId: [
      { required: true, message: "社团ID不能为空", trigger: "blur" }
    ],
    userAccount: [
      { required: true, message: "申请账号不能为空", trigger: "blur" }
    ],
    applicationCause: [
      { required: true, message: "申请原因不能为空", trigger: "blur" }
    ]
  }
});

const { queryParams,rules, form } = toRefs(data);


function cancel() {
  openApplication.value = false;
}

/** 查询社团管理列表 */
function getList() {
  loading.value = true;
  listClubs(queryParams.value).then(response => {
    clubsList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}


function submitFormClubInfo() {
  open.value = false;
  openAnnouncementList.value = false;
  openAnnouncementInfo.value=false;
}

// 表单重置
function reset() {
  form.value = {
    clubId: null,
    clubName: null,
    description: null,
    capacity: null,
    currentMember: null,
    delFlag: null
  };
  proxy.resetForm("clubsRef");
}


// 查看社团详细信息
function handleSelectClub(row) {

  const _clubId = row.clubId || ids.value
  getClubs(_clubId).then(response => {
    form.value = response.data;
    open.value = true;
    title.value = "社团详情";
  })

}


// 查询公告
function handleSelectAnnouncement(row) {

  queryParams.clubId = row.clubId || ids.value
  listAnnouncements(queryParams).then(response => {
    announcementsList.value = response.rows;
    total.value = response.total;
    openAnnouncementList.value = true;
  })


}

//查询详细公告
function selectAnnouncementInfo(row){
  const _announcementId = row.announcementId || ids.value
  getAnnouncements(_announcementId).then(response => {
    form.value = response.data;
    openAnnouncementInfo.value = true;
    title.value = row.title;
  })

}
//点击申请加入社团
function handleApplication(row){
  openApplication.value = true;
  getUserProfile().then(response => {
    form.value.userAccount = response.data.phonenumber;

  })
  form.value = {
    clubId: row.clubId,
    clubName: row.clubName,
    //userAccount为登陆用户的账号
    applicationCause: null
  }
}
//点击确定申请按钮
function submitFormApplication(){
  proxy.$refs["applicationRef"].validate(valid => {
    if (valid) {
        addApplication(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          openApplication.value = false;
          getList();
        });
    }
  });
}

getList();



/* 轮播图*/


const imgIndex = ref(0)
const imgArr = [
  'https://file1.renrendoc.com/fileroot_temp2/2021-2/15/4cd81bbc-25df-45a6-b90c-b2ab5345c0f7/4cd81bbc-25df-45a6-b90c-b2ab5345c0f71.gif',
  'https://img0.baidu.com/it/u=1257901295,1280606978&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=250',
  'https://img1.baidu.com/it/u=1715865683,2020757003&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500'
]


const titles = [
]
const selectImg =(e) => {
  let currentImg = document.querySelector('.img')
  currentImg.style.opacity = '0'
  setTimeout(() => {
    currentImg.src= imgArr[e]
    imgIndex.value = e
    currentImg.style.opacity = '1';
  },500)
}
const next = (e) => {
  e>0? imgIndex.value+=1 : imgIndex.value-=1
  if(imgIndex.value >= imgArr.length ) {
    imgIndex.value=0
  }
  if(imgIndex.value <0 ) {
    imgIndex.value=imgArr.length-1
  }
  selectImg(imgIndex.value)
}
</script>
<style scoped lang="less">
.banner  {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  .left-btn, .right-btn {
    width:  0;
  }
  &:hover {
    .left-btn {
      position: absolute;
      cursor: pointer;
      top: 50%;
      left: 80px;
      width: auto;

    }
    .right-btn {
      position: absolute;
      cursor: pointer;
      top: 50%;
      right: 80px;
      width: auto;
    }
  }
  .img {
    display: none;
    &:first-child {
      display: block;
      height: 60vh;
      opacity: 1;
      transition: opacity 0.5s ease;
    }

  }
  .scale-enter-active{
    transition: all 1s ease-in-out;
  }

  .scale-leave-active {
    transition: all 1s linear;
  }

  .scale-enter-from{
    margin-right: 300px;
    opacity: 0;
  }
  .scale-leave-to {
    opacity: 0;
  }
  .content {
    position: absolute;
    top: 50%;
    font-size: 40px;
    color: #fff;
  }

  .dot-content {
    display: flex;
    position: absolute;
    bottom: 20px;
    justify-content: space-around;
    align-items: center;
    width: 100px;
    height: 30px;

    .dot-box {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: #fff;
      cursor: pointer;
    }
    .active {
      cursor: pointer;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: red;
    }
  }



}
</style>
